import {useState,useRef} from 'react'
import './index.less'
import { SearchOutlined } from '@ant-design/icons';
import { Cascader, Input, Select, Space } from 'antd';
const { Search } = Input;
const { Option } = Select;

const TopSearch = ()=>{
    const searchList = [
        {label:'百度',value:'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd='},
        {label:'必应',value:'https://cn.bing.com/search?q='},
    ]
    const [searchDefault,setSearchDefault] = useState(0)//默认0，百度
    
    const [searchValue,setSearchValue] = useState('')//存储搜索地址

    const aElement = useRef(null)

    // 搜索引擎选项
    const selectBefore = (
        <Select onSelect={(val)=>{setSearchDefault(val)}} defaultValue={searchDefault}>
          {searchList.length&&searchList.map((item,index)=>{
            return (<Option key={index} value={index}>{item.label}</Option>)
          })}
        </Select>
      );
      const onSearch = (val)=>{
        const a = searchList[searchDefault].value+val
        setSearchValue(a)
        // 获取 DOM 元素
    const myElement = aElement.current;
    myElement.href = a
    myElement.click()
      }
    return (<div className='searchDiv'>
        <div>
        {/* <Input onSearch={onSearch} addonBefore={selectBefore} addonAfter={<SearchOutlined />} placeholder="左侧选择搜索引擎后输入要搜索的内容点击搜索" /> */}
        <Search
      addonBefore={selectBefore}
      placeholder="input search text"
      allowClear
      onSearch={onSearch}
      style={{
        width: 304,
      }}
    />
     <a ref={aElement} style={{display:'none'}} href={searchValue} target="_blank" rel="noopener noreferrer"></a>
        </div>
    </div>)
}
export default TopSearch